<template>
  <div class="w-375px">
    <div>
      <van-tabs v-model:active="active" @change="tabsChange">
        <van-tab title="我要预约" name="0">
          <div class="p-20px">
            <div class="text-14px pb-20px border-b flex">
              <div class="w-60px">预约店</div>
              <div class="ml-40px">{{ Info.shop_name }}</div>
            </div>
            <div class="text-14px pb-20px border-b mt-20px flex">
              <div class="w-60px">预约状态</div>
              <div class="ml-40px">{{ Info.state_name }}</div>
            </div>
            <div class="text-14px pb-20px border-b mt-20px">
              <span>当前时间</span>
              <span class="ml-40px">{{ Info.time }}</span>
            </div>
            <div class="mt-20px pb-20px border-b text-14px">请选价格范围：</div>
            <van-radio-group v-model="radioChecked" @change="radioChange">
              <van-radio
                v-for="(item, index) in Info.select_data"
                :name="index"
                class="border-b mt-20px pb-20px justify-between"
                label-position="left"
                >{{ item.name }}</van-radio
              >
              <!-- <van-radio
                name="1"
                class="border-b mt-20px pb-20px justify-between"
                label-position="left"
                >预约4k~7k</van-radio
              >
              <van-radio
                name="2"
                class="border-b mt-20px pb-20px justify-between"
                label-position="left"
                >预约5k~9k</van-radio
              > -->
            </van-radio-group>
            <div
              @click="sumbit"
              class="mt-40px w-full flex justify-center items-center h-49px text-white rounded-5px bg-[#2E95FF]"
            >
              确认预约接龙
            </div>
          </div>
        </van-tab>
        <van-tab title="我的预约" name="1">
          <div class="pb-20px px-20px" v-if="list.length > 0">
            <div
              class="mt-20px pb-15px border-b text-14px"
              v-for="item in list"
            >
              <div class="w-full flex justify-between">
                <div>{{ item.user_name }} 邀请码：{{ item.user_no }}</div>
                <div class="text-[#2E95FF]" @click="copy(item.user_no)">
                  复制邀请码
                </div>
              </div>
              <div class="text-[12px] text-[#6D6D6D] mt-10px">
                {{ item.price }}
              </div>
              <div class="mt-10px">交易时间：{{ item.jy_time }}</div>
              <div class="mt-10px" v-show="item.tj_no">
                邀请码：{{ item.tj_no }} 姓名：{{ item.tj_name }}
              </div>
            </div>
          </div>

          <div v-else class="mt-200px">
            <nodata></nodata>
          </div>
          <div>
            <pagination
              @back="back"
              @next="next"
              :current_page="current_page"
              :last_page="last_page"
              :per_page="per_page"
              :total="total"
            ></pagination>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- <van-action-sheet
      v-model:show="show"
      :actions="actions"
      @select="onSelect"
    /> -->
    <!-- <dataTimePicker
      :values="timeVal"
      @changeValue="showEndDate = false"
      :showPicker="showEndDate"
      @confirm="onConfirmEnd"
    /> -->
  </div>
</template>
<script setup>
import dataTimePicker from "@/components/date-picker.vue";
import { useUserStore } from "@/store/index";
import pagination from "@/components/pagination.vue";
import { ordered, orderedDo, myOrdered } from "@/util/api";
import getImageurl from "@/util/getImageurl";
import nodata from "@/components/nodata.vue";
import { showToast } from "vant";
import { reactive } from "vue";
import { useRouter } from "vue-router";
import h5Copy from "@/util/junyi-h5-copy";
const store = useUserStore();
const active = ref("0");
const show = ref(false);
const showEndDate = ref(false);
const timeVal = ref("666");
const timerFlag = ref(false);
const state = ref(0);
const Info = reactive({
  shop_name: "",
  state_name: "",
  time: "",
  select_data: [],
});
const router = useRouter();
const page = ref(1);
const last_page = ref(0);
const current_page = ref(0);
const per_page = ref(0);
const total = ref(0);
const radioChecked = ref("-1");
const list = ref([]);
const getData = async () => {
  const res = await ordered();

  for (let i in Info) {
    Info[i] = res.msg[i];
  }
};
getData();

const nowDate = (() => {
  var myDate = new Date();
  let y = myDate.getFullYear();
  let m = myDate.getMonth() + 1;
  let d = myDate.getDate();
  let h = myDate.getHours();
  let min = myDate.getMinutes();
  let s = myDate.getSeconds();
  timeVal.value = y + "-" + m + "-" + d + "   " + h + ":" + min + ":" + s;
})();
const onSelect = (v) => {
  show.value = false;
};
const onConfirmEnd = (v) => {
  timeVal.value = v;

  showEndDate.value = false;
};

const radioChange = (v) => {
  radioChecked.value = v;
  console.log(v);
};
//发起预约
const sumbit = async () => {
  let param = {
    price: "",
    min_price: "",
    max_price: "",
  };
  Info.select_data.forEach((item, index) => {
    if (radioChecked.value == index) {
      param.price = item.name;
      param.min_price = item.min_price;
      param.max_price = item.max_price;
    }
  });

  const res = await orderedDo(param);
  console.log(res);
  showToast(res.msg);
  res.code == 1 ? router.go(-1) : "";
};
const myData = async () => {
  const res = await myOrdered({ page: page.value });
  total.value = res.msg.total;
  current_page.value = res.msg.current_page;
  last_page.value = res.msg.last_page;
  per_page.value = res.msg.per_page;
  list.value = res.msg.data;
};
const tabsChange = (v) => {
  console.log(v);
  if (v == 0) {
    getData();
  } else {
    myData();
  }
};
const back = () => {
  page.value--;
  myData();
};
const next = () => {
  page.value++;
  myData();
};
const copy = (val) => {
  const res = h5Copy(val);
  if (res) {
    showToast("复制成功");
  } else {
    showToast("复制失败");
  }
};
</script>
<style scoped lang="scss">
// :deep(.van-action-sheet) {
//   display: flex;
//   align-items: center;
// }
// :deep(.van-action-sheet__content) {
//   width: 375px;
//   display: flex;
//   border-radius: 10px;
//   flex-direction: column;
// }
// :deep(.van-popup) {
//   background: none;
// }
</style>
